<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Temperate 
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20121205

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- <meta http-equiv="refresh" content="30;url=index.html" /> -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My Tracker</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />
<link href="../css/default.css" rel="stylesheet" type="text/css" media="all" />
 <link rel="stylesheet" href="../css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../css/slidestyle.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="../css/themes/default/default.css" type="text/css" media="screen" />
 <link href="../css/iphone.css" media="mobile" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- For google map api and style -->
<script
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAR33uUSrW-Nc3NWqPUZV30Anh1DOS9oto&sensor=false"
	type="text/javascript"></script>
	<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
<script type='text/JavaScript' src='http://www.onemap.sg/API/JS/?accessKEY=MYS2EMioZ0T5i00u8SX9Mgk/xhAQjwOtEcf28j+r3tD0EXo0jrP+OYA+zgkfWVaW++sHniu+Mq/AjwRNc6AW6wqCNF3dALLqaqzsKsI/OOpohsJCdeIWgVcwh6KgDNrHhZTJer4+CVc=|mv73ZvjFcSo='></script>

<style>
.gmap3{
margin: 0px auto;
/* border: 1px dashed #C0C0C0; */
	width: 800px;
	height: 600px;
	border-style:double;
border-width:medium;
}
.rpanel{
margin: 0px auto;
width:300px;
height:600px;
background-image:url("images/sidebar.jpg");
background-repeat:no-repeat;
}
#info{
color:black;
font-size: 18px;
padding:20px 10px 0px 10px;
width:270px;
}
#infoheading{
	color:#FFF;
	font-size: 38px;
	padding:0px 0px 10px 10px;
	width:270px;
}
div#sidebar{
	width:300px;
	height:600px;
	margin-left:20px;
}
#location{
font-weight:bold;
}
.labels {
     color: white;
     background-color: #0172b6;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 25px;
     border: 1px solid black;
     white-space: nowrap;
   }
   
   span.title {
   
   color: #3091F2;
   font-style: italic;
   
   }
    .style4
    {
        width: 15px;
    }
   
    .style5
    {
        width: 15px;
    }
   
    .style6
    {
        width: 15px;
    }
   
    .style7
    {
        width: 15px;
    }
   
    .style8
    {
        width: 15px;
    }
   
    #desc {
 float: left;
 margin: 0 25px 10px 20px;
 width: 10em;
}

#markers {
 position:absolute;
 top:290px;
 left:55%;
 width:200px;
 height:110px;
}

.drag {
 position: absolute;
 width: 32px;
 height: 32px;
}

@media screen and (max-width: 890px) {

 #map {
  width: 93%;
  height: 50%;
 }

 #desc {
  margin: 100px 14px 0;
  width: 93%;
 }
 .include >b {
  float: right;
  margin-top: 17px;
 }

 #markers {
 /* center horizontal and do not overlap the map */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10em;
  height: 6em;
  margin-top: 5em;
  margin-left:-5em;
 }

 #markers > p {
  margin-top: 0;
  font-size: 80%;
 }
}
   
    .style12
    {
        margin-left: 40px;
    }
    .style13
    {
        margin-left: 220px;
    }
   
</style>
<script type="text/javascript">
    if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/android/gi)) || (navigator.userAgent.match(/Windows Phone/i))) { location.replace("phoneadminmap.html"); }

</script>

<script type="text/javascript">
//Move marker from outside - start
    var map, iw, drag_area, actual, obj;
    var dummy, z_index = 0;
    var checkMarkerAB = 0;
    function DummyOView() {
        this.setMap(map);
        this.draw = function () { }
    } DummyOView.prototype = new google.maps.OverlayView();
    function fillMarker(a) {
        if (checkMarkerAB == 0) {
            var b = document.createElement("div");
            b.style.backgroundImage = "url(" + a + ")";
            var c;
            if (obj.id == "m1") {
                c = "0px"
            }
            b.style.left = c;
            b.id = obj.id;
            b.className = "drag";
            b.onmousedown = b.ontouchstart = initDrag;
            drag_area.replaceChild(b, obj);
            obj = null
        }
        else {
            var b = document.createElement("div");
            //b.style.backgroundImage = "url(" + a + ")";
            var c;
            if (obj.id == "m1") {
                c = "0px"
            }
            b.style.left = c;
            b.id = obj.id;
            b.className = "drag";
            b.onmousedown = b.ontouchstart = initDrag;
            drag_area.replaceChild(b, obj);
            obj = null

        }
    }
    function highestOrder() {
        return z_index
    }
    function createDraggedMarker(c, f) {
        var d = google.maps;
        var h = {
            url: f,
            size: new d.Size(32, 32), 
            anchor: new d.Point(15, 32)
        };
        var i = { url: "http://maps.gstatic.com/mapfiles/kml/paddle/A_maps.shadow.png",
            size: new d.Size(59, 32),
            anchor: new d.Point(15, 32)
        };
        if (checkMarkerAB == 0) {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
            var g = new d.Marker({
                position: c,
                map: map,
                clickable: true,
                draggable: true,
                optimized: false,
                raiseOnDrag: false,
                icon: h,
                shadow: i,
                zIndex: highestOrder(),
                icon: 'images/MarkerA.png'
            });
            markersArray[0] = g;
            pointA = 1;
            pointStart = g.getPosition().lat().toFixed(6) + "," + g.getPosition().lng().toFixed(6);
            document.getElementById('textFrom').value = pointStart;
        }
        if (checkMarkerAB == 1) {
            var g = new d.Marker({
                position: c,
                map: map,
                clickable: true,
                draggable: true,
                optimized: false,
                raiseOnDrag: false,
                icon: h,
                shadow: i,
                zIndex: highestOrder(),
                icon: 'images/MarkerB.png'
            });
            markersArray[1] = g;
            pointB = 1;
            pointEnd = g.getPosition().lat().toFixed(6) + "," + g.getPosition().lng().toFixed(6);
            document.getElementById('textTo').value = pointEnd;
        }
        d.event.addListener(g, "click", function () {
            actual = g;
            var a = actual.getPosition().lat();
            var b = actual.getPosition().lng();
            iw.setContent(a.toFixed(6) + ", " + b.toFixed(6));
            
            iw.open(map, this)
        });
        d.event.addListener(g, "dragstart", function () {
            if (actual == g) iw.close();
            z_index += 1;
            g.setZIndex(highestOrder())
        });
    }
    function initDrag(e) {
        var l = function (a) {
            var b = {};
            if (a && a.touches && a.touches.length) {
                b.x = a.touches[0].clientX;
                b.y = a.touches[0].clientY
            }
            else {
                if (!a) var a = window.event;
                b.x = a.clientX;
                b.y = a.clientY
            }
            return b
        };
        var m = function (r) {
            if (obj && obj.className == "drag") {
                var n = l(r), s = n.x - o.x, t = n.y - o.y; obj.style.left = (obj.x + s) + "px";
                obj.style.top = (obj.y + t) + "px";
                obj.onmouseup = obj.ontouchend = function () {
                    var a = map.getDiv(), b = a.offsetLeft, c = a.offsetTop, f = a.offsetWidth, d = a.offsetHeight;
                    var h = drag_area.offsetLeft, i = drag_area.offsetTop, g = obj.offsetWidth, p = obj.offsetHeight;
                    var j = obj.offsetLeft + h + g / 2;
                    var k = obj.offsetTop + i + p / 2;
                    if (j > b && j < (b + f) && k > c && k < (c + d)) {
                        var u = 1;
                        var v = google.maps;
                        var w = new v.Point(j - b - u, k - c + (p / 2));
                        var x = dummy.getProjection();
                        var y = x.fromContainerPixelToLatLng(w);
                        var q = obj.style.backgroundImage.slice(4, -1).replace(/"/g, "");
                        createDraggedMarker(y, q); fillMarker(q);
                        checkMarkerAB++;
                    }
                }
            } return false
        };
        if (!e) var e = window.event;
        obj = e.target ? e.target : e.srcElement ? e.srcElement : e.touches ? e.touches[0].target : null; if (obj.className != "drag") {
            if (e.cancelable) e.preventDefault();
            obj = null;
            return
        }
        else {
            z_index += 1; obj.style.zIndex = z_index.toString();
            obj.x = obj.offsetLeft;
            obj.y = obj.offsetTop;
            var o = l(e);
            if (e.type === "touchstart") {
                obj.onmousedown = null;
                obj.ontouchmove = m;
                obj.ontouchend = function () {
                    obj.ontouchmove = null;
                    obj.ontouchend = null;
                    obj.ontouchstart = initDrag
                }
            }
            else {
                document.onmousemove = m;
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if (obj) obj = null
                }
            }
        }
        return false
    }
    function buildMap() {
        var a = google.maps;
        var b = {
            center: new a.LatLng(1.3667, 103.80),
            zoom: 12,
            mapTypeId: a.MapTypeId.ROADMAP,
            streetViewControl: false,
            mapTypeControlOptions: {
                mapTypeIds: [a.MapTypeId.ROADMAP,
            a.MapTypeId.SATELLITE,
            a.MapTypeId.TERRAIN]
            },
            panControl: false,
            zoomControlOptions: {
                style: a.ZoomControlStyle.SMALL
            }
        }; map = new a.Map(document.getElementById("map"), b);
        iw = new a.InfoWindow();
        a.event.addListener(map, "click", function () { if (iw) iw.close() });
        drag_area = document.getElementById("markers");
        var c = drag_area.getElementsByTagName("div");
        for (var f = 0; f < c.length; f++) {
            var d = c[f];
            d.onmousedown = d.ontouchstart = initDrag
        } dummy = new DummyOView()
    }
    //Move marker from outside - End

    var directionsDisplay;
    var directionsService;
    var stepDisplay;
    var markersArray = [];
    var searchvalue;
    var results;
    var i = 0;
    var listener;
    var coordinate;
    var pointStart;
    var pointEnd;
    var pointA = 0;
    var pointB = 0;
    function initDragMarker() {
        iw = new a.InfoWindow();
        a.event.addListener(map, "click", function () { if (iw) iw.close() });
        drag_area = document.getElementById("markers");
        var c = drag_area.getElementsByTagName("div");
        for (var f = 0; f < c.length; f++) {
            var d = c[f];
            d.onmousedown = d.ontouchstart = initDrag
        } dummy = new DummyOView();
    }

    function initialize() {
        // Instantiate a directions service.
        directionsService = new google.maps.DirectionsService();

        var latlng = new google.maps.LatLng(1.3667, 103.80);
        var mapOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var a = google.maps;

        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        iw = new a.InfoWindow();
        a.event.addListener(map, "click", function () { if (iw) iw.close() });
        drag_area = document.getElementById("markers");
        var c = drag_area.getElementsByTagName("div");
        for (var f = 0; f < c.length; f++) {
            var d = c[f];
            d.onmousedown = d.ontouchstart = initDrag
        }dummy = new DummyOView();
        geocoder = new google.maps.Geocoder();

        // Create a renderer for directions and bind it to the map.
        var rendererOptions = {
            map: map
        }
        directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

        // Instantiate an info window to hold step text.
        stepDisplay = new google.maps.InfoWindow();
    }
    //Get the distance
    function calcRoute() {

        // First, remove any existing markers from the map.
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        }

        // Now, clear the array itself.
        markersArray = [];

        // Retrieve the start and end locations and create
        // a DirectionsRequest using WALKING directions.
        var start = pointStart;
        var end = pointEnd;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.WALKING
        };

        // Route the directions and pass the response to a
        // function to create markers for each step.
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                //var warnings = document.getElementById('warnings_panel');
                //warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';
                directionsDisplay.setDirections(response);
                showSteps(response);
            }
        });
    }

    function showSteps(directionResult) {
        // For each step, place a marker, and add the text to the marker's
        // info window. Also attach the marker to an array so we
        // can keep track of it and remove it when calculating new
        // routes.
        var myRoute = directionResult.routes[0].legs[0];

        for (var i = 0; i < myRoute.steps.length; i++) {
            var marker = new google.maps.Marker({
                position: myRoute.steps[i].start_point,
                map: map
            });
            attachInstructionText(marker, myRoute.steps[i].instructions);
            markersArray[i] = marker;
        }
    }

    function attachInstructionText(marker, text) {
        google.maps.event.addListener(marker, 'click', function () {
            // Open an info window when the marker is clicked on,
            // containing the text of the step.
            stepDisplay.setContent(text);
            stepDisplay.open(map, marker);
        });
    }







    function GetSearchData() {
        var basicSearch = new BasicSearch;
        var searchText = document.getElementById("txtSearchLocation").value
        basicSearch.searchVal = searchText;
        basicSearch.returnGeom = '1';

        basicSearch.GetSearchResults(displayData)
    }

    function displayData(resultData) {
        var results = resultData.results;
        if (results == 'No results') {
            document.getElementById('description').innerHTML = "No result(s) found";
            return false
        }
        else {
            var htmlStr = "<table>";
            htmlStr = htmlStr + "<tr><td><b>Search Value</b></br></td></tr>";
            for (var i = 0; i < results.length; i++) {
                var row = results[i];
                var serachval = row.SEARCHVAL;
                htmlStr = htmlStr + "<tr>";
                htmlStr = htmlStr + "<td>";
                htmlStr = htmlStr + "<a href='JavaScript:MarkerPlot(" + row.X + "," + row.Y + "," + "\"" + row.SEARCHVAL + "\"" + ")'>" + row.SEARCHVAL + "</a>";
                htmlStr = htmlStr + "</td>";
                htmlStr = htmlStr + "</tr>";
            }
            htmlStr = htmlStr + "</table>";
            document.getElementById('description').innerHTML = htmlStr;
        }
    }

    function showVals(outXY) {

        var outputXY = outXY;
        var n = outputXY.split(",");

        var axispoint = n[1] + "," + n[0];
        //document.getElementById("outputXY").value = axispoint;

        //adding markers start here
        var latLng = new google.maps.LatLng(n[1], n[0]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: 'http://maps.google.com/mapfiles/marker_green.png'
        });
        var infowindow = new google.maps.InfoWindow({
            content: '<b>' + document.getElementById("outputXY").value + '</b>'
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
        markersArray.push(marker);

    }

    function MarkerPlot(xVal, yVal, searchValue) {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        }

        var inXYList = xVal + "," + yVal;
        var inputSR, outputSR;
        inputSR = 3414;
        outputSR = 4326;
        document.getElementById("outputXY").value = searchValue;
        var CoordConvertorObj = new CoordConvertor();
        CoordConvertorObj.ConvertCoordinate(inXYList, inputSR, outputSR, showVals);
    }
    function AddressSearch() {
        google.maps.event.removeListener(listener);

        var Searchhtml = "Find Location : &nbsp;";
        Searchhtml = Searchhtml + "<input type= " + "\"" + "text" + "\"" + " id=" + "\"" + "txtSearchLocation" + "\"" + "  placeholder='Enter your search location...' size=" + "\"" + "40" + "\"" + "/>";
        Searchhtml = Searchhtml + "&nbsp;<input id=" + "\"" + "SearchData" + "\"" + " type=" + "\"" + "button" + "\"" + " value=" + "\"" + "GO" + "\"" + " onclick=" + "\"" + "GetSearchData();" + "\"" + "/>";
        document.getElementById('SearchBar').innerHTML = Searchhtml;
    }

    function FacilityGuide() {

        google.maps.event.removeListener(listener);

        var strRpanel = "<div id=" + "\"" + "info" + "\"" + " class=" + "\"" + "rpanel" + "\"" + "> <div id=" + "\"" + "infoheading" + "\"" + " class=" + "\"" + "infoheading" + "\"" + ">Facilities</div>";
        strRpanel = strRpanel + "<p>&nbsp;</p>";
        //strRpanel = strRpanel + "<p><input type=" + "\"" + "checkbox" + "\"" + " name=" + "\"" + "cbShoppingCenter" + "\"" + " id=" + "\"" + "cbShoppingCenter" + "\"" + " onclick=" + "\"" + "cbShoppingCenter_onclick()" + "\"" + " />&nbsp; Shopping Center</p>";
        strRpanel = strRpanel + "<p><input type=" + "\"" + "checkbox" + "\"" + " name=" + "\"" + "cbTourustAttraction" + "\"" + " id=" + "\"" + "cbTourustAttraction" + "\"" + " onclick=" + "\"" + "cbTourustAttraction_onclick()" + "\"" + " />&nbsp; Tourist Attractions</p>";
        strRpanel = strRpanel + "<p><input type=" + "\"" + "checkbox" + "\"" + " name=" + "\"" + "cbConcertHall" + "\"" + " id=" + "\"" + "cbConcertHall" + "\"" + " onclick=" + "\"" + "cbConcertHall_onclick()" + "\"" + " />&nbsp; Concert Hall</p>";
        strRpanel = strRpanel + "<p><input type=" + "\"" + "checkbox" + "\"" + " name=" + "\"" + "cbParks" + "\"" + " id=" + "\"" + "cbParks" + "\"" + " onclick=" + "\"" + "cbParks_onclick()" + "\"" + " />&nbsp; Parks</p>";
        strRpanel = strRpanel + "</div>";
        document.getElementById('SearchBar').innerHTML = "";
        document.getElementById('description').innerHTML = strRpanel;
    }

    function overlayData(mashupResults) {
        results = mashupResults.results;
        if (results == "No results") {
            alert("There are errors with this function");
            return
        }
        else {
            //document.getElementById("output").value = results[3].NAME;
            for (i = 0; i < results.length; i++) {
                var inXYList = results[i].XY;
                var n = inXYList.split(",");
                //searchvalue = results[i].NAME;
                MarkerFacilities(n[0], n[1], i);

            }
            MarkerName();
            //document.getElementById("output").value = "ddd" ;
        }
    }

    function MarkerFacilities(xVal, yVal, searchValue) {

        var inXYList = xVal + "," + yVal;
        var inputSR, outputSR;
        inputSR = 3414;
        outputSR = 4326;
        searchvalue = searchValue;
        var CoordConvertorObj = new CoordConvertor();
        CoordConvertorObj.ConvertCoordinate(inXYList, inputSR, outputSR, showValsFacilitites);
    }

    function showValsFacilitites(outXY) {

        var outputXY = outXY;
        var n = outputXY.split(",");

        var axispoint = n[1] + "," + n[0];
        //document.getElementById("outputXY").value = axispoint;

        //adding markers start here
        var latLng = new google.maps.LatLng(n[1], n[0]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: 'http://maps.google.com/mapfiles/marker_green.png'
        });
        var infowindow = new google.maps.InfoWindow({
            content: '<b>' + results[i].NAME + '</b>'
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });

        markersArray.push(marker);


    }

    function MarkerName() {
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);


                //var infowindow = new google.maps.InfoWindow({
                //    content: '<b>' + results[i].NAME + '</b>'
                //});

                //google.maps.event.addListener(markersArray[i], 'click', function () {
                //   infowindow.open(map, markersArray[i]);
                //});

                //markersArray[0]
            }
        }
        document.getElementById("output").value = "dd";
    }


</script>

 <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $('#slider').nivoSlider();
        });
        function cbTourustAttraction_onclick() {
            $('input[name=cbShoppingCenter]').attr('checked', false);
            $('input[name=cbTourustAttraction]').attr('checked', true);
            $('input[name=cbConcertHall]').attr('checked', false);
            $('input[name=cbParks]').attr('checked', false);
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
            var themeName = "TOURISM";
            mashup = new MashupData();
            mashup.themeName = themeName;
            mashup.extent = "-4423.6,15672.6,69773.4,52887.4";
            mashup.GetMashupData(overlayData);
        }



        function cbConcertHall_onclick() {
            $('input[name=cbShoppingCenter]').attr('checked', false);
            $('input[name=cbTourustAttraction]').attr('checked', false);
            $('input[name=cbConcertHall]').attr('checked', true);
            $('input[name=cbParks]').attr('checked', false);
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
            var themeName = "AUDITORIUMS";
            mashup = new MashupData();
            mashup.themeName = themeName;
            mashup.extent = "-4423.6,15672.6,69773.4,52887.4";
            mashup.GetMashupData(overlayData);
        }



        function cbParks_onclick() {
            $('input[name=cbShoppingCenter]').attr('checked', false);
            $('input[name=cbTourustAttraction]').attr('checked', false);
            $('input[name=cbConcertHall]').attr('checked', false);
            $('input[name=cbParks]').attr('checked', true);

            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
            var themeName = "NATIONALPARKS";
            mashup = new MashupData();
            mashup.themeName = themeName;
            mashup.extent = "-4423.6,15672.6,69773.4,52887.4";
            mashup.GetMashupData(overlayData);
        }
        function showGeolocation() {

            google.maps.event.removeListener(listener);

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showLocation, errorHandler);
                //setStyle("progress", "progress");
            } else {
                alert("Sorry, your browser doesn't support geolocation.");
            }
        }
        function showLocation(position) {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
            // Create a point
            var pt = position.coords.latitude + "," + position.coords.longitude;
            //document.getElementById("output").value = pt;
            var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                icon: 'http://maps.google.com/mapfiles/marker_green.png'
            });
            marker.setAnimation(google.maps.Animation.BOUNCE);
            markersArray.push(marker);
            var infowindow = new google.maps.InfoWindow({
                content: '<b>' + "Your Current Location" + '</b>'
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

            google.maps.event.addListener(marker, 'dblclick', function () {
                map.setZoom(17);
                map.setCenter(marker.getPosition());
            });
        }
        function errorHandler(err) {
            setStyle("progress", "progress hidden");
            if (err.code == 1) {
                alert("Error: Access is denied!");
            } else if (err.code == 2) {
                alert("Error: Position is unavailable!");
            } else
                alert("Error: " + err);
        }

        function getReverseGeocode() {

            var Searchhtml = "Click the map to identify the building or place.";
            document.getElementById('SearchBar').innerHTML = Searchhtml;

            listener = google.maps.event.addListener(map, "click", function (event) {
                var lat = event.latLng.lat();
                var lng = event.latLng.lng();
                coordinate = lat + "," + lng;
                var inXYList = lng + "," + lat;
                var inputSR, outputSR;
                inputSR = 4326;
                outputSR = 3414;
                var CoordConvertorObj = new CoordConvertor();
                CoordConvertorObj.ConvertCoordinate(inXYList, inputSR, outputSR, reverseGeocodeVal);
                // populate yor box/field with lat, lng
                //alert("Lat=" + lat + "; Lng=" + lng);
            });
        }
        function reverseGeocodeVal(outXY) {

            var oneMapAddressInfoObj = new GetAddressInfo;
            oneMapAddressInfoObj.XY = outXY;

            oneMapAddressInfoObj.GetAddress(function (addressData) {
                DisplayData(addressData);
            });
        }

        function DisplayData(addressData) {
            if (addressData.results == "No results") {
                alert("No results");
            }
            else {
                if (addressData.results[0].BUILDINGNAME == null && addressData.results[0].ROAD == null && addressData.results[0].POSTALCODE == null) {
                    alert("Could not identify the place");
                }
                else {

                    if (markersArray) {
                        for (i in markersArray) {
                            markersArray[i].setMap(null);
                        }
                    }
                    var n = coordinate.split(",");

                    var latLng = new google.maps.LatLng(n[0], n[1]);
                    var marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        icon: 'http://maps.google.com/mapfiles/marker_green.png'
                    });

                    markersArray.push(marker);

                    if (addressData.results[0].BUILDINGNAME != null && addressData.results[0].ROAD != null && addressData.results[0].POSTALCODE != null) {

                        var infowindow = new google.maps.InfoWindow({
                            content: '<b>' + addressData.results[0].BUILDINGNAME + '</b></br>' + addressData.results[0].ROAD + '</br>' + addressData.results[0].POSTALCODE
                        });
                    }

                    if (addressData.results[0].BUILDINGNAME == null && addressData.results[0].ROAD != null && addressData.results[0].POSTALCODE != null) {

                        var infowindow = new google.maps.InfoWindow({
                            content: addressData.results[0].ROAD + '</br>' + addressData.results[0].POSTALCODE
                        });
                    }

                    if (addressData.results[0].BUILDINGNAME == null && addressData.results[0].ROAD == null && addressData.results[0].POSTALCODE != null) {

                        var infowindow = new google.maps.InfoWindow({
                            content: addressData.results[0].POSTALCODE
                        });
                    }

                    if (addressData.results[0].BUILDINGNAME == null && addressData.results[0].ROAD != null && addressData.results[0].POSTALCODE == null) {

                        var infowindow = new google.maps.InfoWindow({
                            content: addressData.results[0].ROAD
                        });
                    }


                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });
                    //document.getElementById("output").value = coordinate;
                    //document.getElementById("output").value = addressData.results[0].BUILDINGNAME + " " + addressData.results[0].ROAD + " " + addressData.results[0].POSTALCODE + " " + addressData.results[0].XCOORD + " " + addressData.results[0].YCOORD;

                }
            }

        }
        function showResultFrom(str) {
            var basicSearch = new BasicSearch;
            var searchText = str;
            basicSearch.searchVal = searchText;
            basicSearch.returnGeom = '1';

            basicSearch.GetSearchResults(displayDataFrom)
        }

        function displayDataFrom(resultData) {
            var results = resultData.results;
            if (results == 'No results') {
                document.getElementById('description').innerHTML = "No result(s) found";
                return false
            }
            else {
                var htmlStr = "<table>";
                htmlStr = htmlStr + "<tr><td><b>Search Value</b></br></td></tr>";
                for (var i = 0; i < results.length; i++) {
                    var row = results[i];
                    var serachval = row.SEARCHVAL;
                    htmlStr = htmlStr + "<tr>";
                    htmlStr = htmlStr + "<td>";
                    htmlStr = htmlStr + "<a href='JavaScript:MarkerPlotA(" + row.X + "," + row.Y + "," + "\"" + row.SEARCHVAL + "\"" + ")'>" + row.SEARCHVAL + "</a>";
                    htmlStr = htmlStr + "</td>";
                    htmlStr = htmlStr + "</tr>";
                }
                htmlStr = htmlStr + "</table>";
                document.getElementById('description').innerHTML = htmlStr;
            }
        }
        function MarkerPlotA(xVal, yVal, searchValue) {
            if (pointA == 0 && pointB == 0) {
                if (markersArray) {
                    for (i in markersArray) {
                        markersArray[i].setMap(null);
                    }
                }
            }
            if (pointA == 1) {
                markersArray[0].setMap(null);
            }

            var inXYList = xVal + "," + yVal;
            var inputSR, outputSR;
            inputSR = 3414;
            outputSR = 4326;
            document.getElementById("outputXY").value = searchValue;
            var CoordConvertorObj = new CoordConvertor();
            CoordConvertorObj.ConvertCoordinate(inXYList, inputSR, outputSR, showValsA);

            document.getElementById('textFrom').value = searchValue;
        }
        function showValsA(outXY) {

            var outputXY = outXY;
            var n = outputXY.split(",");

            var axispoint = n[1] + "," + n[0];
            //document.getElementById("outputXY").value = axispoint;
            pointStart = axispoint;

            //adding markers start here
            var latLng = new google.maps.LatLng(n[1], n[0]);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                icon: 'images/MarkerA.png'
            });
            var infowindow = new google.maps.InfoWindow({
                content: '<b>' + document.getElementById("outputXY").value + '</b>'
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
            markersArray[0] = marker;
            pointA = 1;
        }


        function showResultTo(str) {

            var basicSearch = new BasicSearch;
            var searchText = str;
            basicSearch.searchVal = searchText;
            basicSearch.returnGeom = '1';

            basicSearch.GetSearchResults(displayDataTo)
        }

        function displayDataTo(resultData) {
            var results = resultData.results;
            if (results == 'No results') {
                document.getElementById('description').innerHTML = "No result(s) found";
                return false
            }
            else {
                var htmlStr = "<table>";
                htmlStr = htmlStr + "<tr><td><b>Search Value</b></br></td></tr>";
                for (var i = 0; i < results.length; i++) {
                    var row = results[i];
                    var serachval = row.SEARCHVAL;
                    htmlStr = htmlStr + "<tr>";
                    htmlStr = htmlStr + "<td>";
                    htmlStr = htmlStr + "<a href='JavaScript:MarkerPlotB(" + row.X + "," + row.Y + "," + "\"" + row.SEARCHVAL + "\"" + ")'>" + row.SEARCHVAL + "</a>";
                    htmlStr = htmlStr + "</td>";
                    htmlStr = htmlStr + "</tr>";
                }
                htmlStr = htmlStr + "</table>";
                document.getElementById('description').innerHTML = htmlStr;
            }
        }
        function MarkerPlotB(xVal, yVal, searchValue) {
            if (pointA == 0 && pointB == 0) {
                if (markersArray) {
                    for (i in markersArray) {
                        markersArray[i].setMap(null);
                    }
                }
            }
            if (pointB == 1) {
                markersArray[1].setMap(null);
            }

            var inXYList = xVal + "," + yVal;
            var inputSR, outputSR;
            inputSR = 3414;
            outputSR = 4326;
            document.getElementById("outputXY").value = searchValue;
            var CoordConvertorObj = new CoordConvertor();
            CoordConvertorObj.ConvertCoordinate(inXYList, inputSR, outputSR, showValsB);
            document.getElementById('textTo').value = searchValue;
        }

        function showValsB(outXY) {

            var outputXY = outXY;
            var n = outputXY.split(",");

            var axispoint = n[1] + "," + n[0];
            //document.getElementById("outputXY").value = axispoint;
            pointEnd = axispoint;

            //adding markers start here
            var latLng = new google.maps.LatLng(n[1], n[0]);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                icon: 'images/MarkerB.png'
            });
            var infowindow = new google.maps.InfoWindow({
                content: '<b>' + document.getElementById("outputXY").value + '</b>'
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
            markersArray[1] = marker;
            pointB = 1;
        }
        function getDirection() {
            google.maps.event.removeListener(listener);
            
            var Searchhtml = "<b>Get Direction&nbsp;&nbsp; |&nbsp;&nbsp;</b>From&nbsp; :&nbsp;";
            Searchhtml = Searchhtml + "<input id=" + "\"" + "textFrom" + "\"" + " type=" + "\"" + "text" + "\"" + " placeholder='Enter your start location...' onkeyup=" + "\"" + "showResultFrom(this.value)" + "\"" + " class=" + "\"" + "style9" + "\"" + "/>&nbsp;&nbsp;&nbsp; To&nbsp; :&nbsp;";
            Searchhtml = Searchhtml + "<input id=" + "\"" + "textTo" + "\"" + " type=" + "\"" + "text" + "\"" + " placeholder='Enter your end location...'  onkeyup=" + "\"" + "showResultTo(this.value)" + "\"" + " class=" + "\"" + "style10" + "\"" + " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            Searchhtml = Searchhtml + "<input id=" + "\"" + "btnDirection" + "\"" + " type=" + "\"" + "button" + "\"" + " value=" + "\"" + "GO" + "\"" + " onclick=" + "\"" + "calcRoute();" + "\"" + " />";
            Searchhtml = Searchhtml + "<br/> <b class=" + "\"" + "style13" + "\"" + ">Drag the markers to a new location on the map</b>";
            DragMarker ="<div id=" + "\"" + "markers" + "\"" + "><div id=" + "\"" + "m1" + "\"" + " class=" + "\"" + "drag" + "\"" + " style=" + "\"" + "left:0; background-image: url('http://maps.gstatic.com/mapfiles/ms/icons/ltblue-dot.png')" + "\"" + "></div></div>";
            document.getElementById('SearchBar').innerHTML = Searchhtml;
            document.getElementById('divMarker').innerHTML = DragMarker;
            initialize();
            //document.getElementById('output').value = Searchhtml;
        }


    </script>
    
</head>
<body onload="initialize();">
<div id="wrapper">
	<div id="header-wrapper">
		<div id="header" style="backgound-color:#0078D1;">
			<div id="logo">
				<h1><a href="#">Omni-Health</a></h1>
				 <!-- <p>Pte Ltd</p> -->
			</div>
			<div id="menu">
				<ul id="mapnav">
					<li><a href="index.html" accesskey="1" title="">Map</a></li>
					<li><a href="facility.html">Facility</a></li>
						<li><a href="Login.html" accesskey="1" title="">Logout</a></li>
				</ul>
			</div>
		</div>
	</div>

	<!-- <div id="banner"></div>-->
	<div id="page-wrapper">
		<div id="page">
			<div id="content">
				<div>
                <table>
                <tr>
                <td><h2>Facility Guide</h2></td>
                <td class="style4"></td>
                <!--<td><a href='JavaScript:FacilityGuide()' title="Facility Guide"><img alt="Facility" src="images/facility.jpg" height="62px" width="65px" /></a></td> -->
                <td class="style5"></td>
                <td><a href='JavaScript:AddressSearch()'title="Address Search"><img alt="Address Search" src="images/search.jpg" height="62px" width="65px" /></a></td>
                <td class="style6"></td>
                <td><a href='JavaScript:showGeolocation()'title="Click to see your location"><img alt="Current Location" src="images/CurrentLocation.jpg" height="62px" width="65px" /></a></td>
                <td class="style7"></td>
                <td><a href='JavaScript:getReverseGeocode()'title="Identify the location on the map"><img alt="Identify" src="images/Identify.jpg" height="62px" width="65px" /></a></td>
                <td class="style8"></td>
                <td><a href='JavaScript:getDirection()'title="Get Direction"><img alt="Get Location" src="images/GetDirection.jpg" height="62px" width="65px" /></a></td>
                </tr>
                </table>

                <table>
                <tr>
                <td colspan="4"></td>
                <td><div id="SearchBar">

                </div>
                </td>
                </tr>
                <tr>
                <td>&nbsp;</td>
                </tr>
                
                  
                </table>
				<div id="map" class="gmap3"></div>
					
				</div>
			</div>
			<div id="sidebar">
				<h2></h2>
                <div id="description" style="height:680px;width:299px;border:1px solid #ccc;overflow:auto;">
                
                <div id="info" class="rpanel"> <div id="infoheading" class="infoheading">Facility Guide</div>
                  <p>&nbsp;</p>
                  <p>There are four features here in this facility guide. The four features are Address Search, Current Location, Identify your Location and Get Direction.</p>
                  <!-- <p><input type="checkbox" name="cbTourustAttraction" id="cbTourustAttraction" onclick="cbTourustAttraction_onclick()" />&nbsp; Tourist Attractions</p>
                  <p><input type="checkbox" name="cbConcertHall" id="cbConcertHall" onclick="cbConcertHall_onclick()" />&nbsp; Concert Hall</p>
                  <p><input type="checkbox" name="cbParks" id="cbParks" onclick="cbParks_onclick()" />&nbsp; Parks</p> -->
                </div>
                
                </div>				
			</div>
		</div>
	</div>
	</div>

    <div id="divMarker">
    </div>




	<!-- <div id="footer-wrapper">
		<div id="footer-content" align="center" style="padding:35px 0px 0px 0px;">
			<div class="slider-wrapper theme-default" style="width:800px; height:260px;" >
            <div id="slider" class="nivoSlider">
                <img src="images/header.jpg" data-thumb="images/header.jpg" alt="" />
                <img src="images/1.jpg" data-thumb="images/1.jpg" alt=""/>
                <img src="images/2.jpg" data-thumb="images/2.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/3.jpg" data-thumb="images/3.jpg" alt=""  />
				 <img src="images/4.jpg" data-thumb="images/4.jpg" alt="" />
				  <img src="images/5.jpg" data-thumb="images/5.jpg" alt=""  />
            </div>
        </div>

	</div>
</div> -->
<div id="footer">
	<p>Copyright (c) by Nanyang Polytechnic.</p>
    <textarea rows="5" id="outputXY" cols="20" name="S2" style="width: 100%; height: 60px; visibility:hidden; display:none;" ></textarea><textarea rows="5" id="output" cols="20" name="S2" style="width: 100%; height: 60px; visibility:hidden; display:none;" ></textarea>
</div>
</body>
</html>
